<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            border: 1px solid black;
        }
        h1{
            text-align: center;
        }

        #all {
            width: 1000px;
            height: 800px;
            display: flex;
        }

        #leftDiv {
            width: 400px;
            height: 400px;
            text-align: center;
        }

        #rightDiv {
            width: 600px;
            height: 600px;
        }

        td {
            text-align: center;
        }

        #addDiv {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background-color: rgba(125, 125, 125, 0.5);
            visibility: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #contentDiv {
            width: 400px;
            height: 300px;
            overflow-y: auto;
            padding: 30px;
            border: 2px solid #000000;
            background-color: lightyellow;
        }
    </style>
    <script src="book.js"></script>
    <script>
        function $(id) {
            return document.getElementById(id);
        }

        window.onload = function () {
            showInfo(bookArray);
        }

        function showInfo(arr) {
            let str = "";
            arr.forEach(n => {
                str += `<tr><td>${n.code}</td><td>${n.name}</td>
                        <td>${n.writer}</td><td>${n.price}</td>
                        <td><input type="button" value="查看" onclick="lookBook(${n.code})"/>
                        <input type="button" value="加入购物车" id="add" onclick="addBook(${n.code})"/></td> </tr>`;
            });
            $("data").innerHTML = str;
            $("leftDiv").style.visibility = "hidden";
        }

        /**
         * 显示购物车信息
         * */
        function showAddInfo(arr) {
            let str = "";
            var totalPrice = 0;
            arr.forEach(n => {
                str += `<tr><td>${n.name}</td><td>${n.price}</td>
                      <td><input type="number" min="1" value="${n.num}" onblur="changeNum(${n.code},this.value)"/></td>
                      <td>${n.price * n.num}</td>
                      <td><input type="button" value="移除商品" onclick="del(${n.code})"
                      style="background-color: lightgoldenrodyellow"/></td></tr>`;
                totalPrice += n.price * n.num;
            });
            $("cartData").innerHTML = str;
            $("totalPrice").innerHTML = totalPrice;
            console.log(totalPrice);
        }

        /**
         * 加入购物车
         * @param code 选中图书的编号
         */
        function addBook(code) {
            //显示购物车对话框
            $("addDiv").style.visibility = "visible";
            var bookObj = cartArray.find(n => n.code == code);
            var book = bookArray.find(n => n.code == code);
            if (bookObj != null) {
                bookObj.num += 1;
            } else {
                bookObj = {code: code, name: book.name, price: book.price, num: 1};
                cartArray.push(bookObj);
            }
            showAddInfo(cartArray);
        }

        /**
         * 改变购买数量
         * @param code 要修改数量的商品的编号
         * @num 改变成的数量
         */
        function changeNum(code, bookNum) {
            //找到要修改数量的对象
            let obj = cartArray.find(n => n.code == code);
            obj.num = bookNum;
            showAddInfo(cartArray);
        }

        /**
         * 删除商品
         * @param code 选中图书的编号
         */
        function del(code) {
            //找到指定编号对应商品的下标
            let index = cartArray.findIndex(n => n.code == code);
            cartArray.splice(index, 1);
            showAddInfo(cartArray);
        }

        /**
         * 查看选中的图书详情
         * @param code 选中图书的编号
         */
        function lookBook(code) {
            //选中的图书
            var bookObj = bookArray.find(n => n.code == code);
            $("nameSpan").innerHTML = bookObj.name;
            $("writerSpan").innerHTML = bookObj.writer;
            $("dateSpan").innerHTML = bookObj.date;
            $("priceSpan").innerHTML = bookObj.price;

            $("leftDiv").style.visibility = "visible";
        }

        /**
         * 按图书名模糊查询，如果没有输入内容则查询全部
         */
        function searchBook() {
            var newBookArr = bookArray.filter(n =>
                n.name.indexOf($("search").value) != -1);
            showInfo(newBookArr);
        }

        /**
         * 关闭购物车，继续购物
         */
        function continueShop() {
            $("addDiv").style.visibility = "hidden";
        }


    </script>
</head>
<body>
<div id="all">
    <div id="leftDiv">
        图书名：<span id="nameSpan"></span><br>
        作者：<span id="writerSpan"></span><br>
        出版时间：<span id="dateSpan"></span><br>
        售价：<span id="priceSpan"></span><br>
    </div>
    <div id="rightDiv">
        <h1>图书一览</h1>
        <table>
            <thead>
            <tr>
                <th></th>
                <th>图书名称</th>
                <th>作者</th>
                <th>销售价</th>
                <th></th>
            </tr>
            </thead>
            <tbody id="data"></tbody>
        </table>
        图书名<input type="text" id="search"/>
        <input type="button" value="查询" onclick="searchBook()"
               style="background-color: orange"/>
    </div>
</div>

<div id="addDiv">
    <div id="contentDiv">
        <table>
            <thead>
            <tr>
                <th>商品名</th>
                <th>单价</th>
                <th>数量</th>
                <th>总价</th>
                <th>移除商品</th>
            </tr>
            </thead>
            <tbody id="cartData"></tbody>
        </table>
        <input type="button" value="继续购物" onclick="continueShop()"
               style="background-color: lightgoldenrodyellow"/>
        总价：<span id="totalPrice"></span>
    </div>

</div>

</body>
</html>